<template>
	<view class="box">
		<view class="top-imgage">
			<image class="img-dl" src="../static/login/yxyou.png"></image>
		</view>
		<view class="container">
			<view class="top-title">登录</view>
			<view class="input-box">
				<view class="input-box-phone">手机号码：</view>
				<input v-model="phone" type="number" placeholder="请输入电话号码" />
			</view>
			<view class="input-box">
				<view class="input-box-phone">验证码：</view>
				<input class="yzm" v-model="password" type="number" placeholder="请输入验证码" />
				<view class="button-btn-box">
					<button @click="sendSmsCode">获取验证码</button>
				</view>

			</view>
			<view class="btn" @tap="login">登录</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '13765907817',
				password: '895450'
			};
		},
		
		methods: {
			login() {
				
				this.$Request.nRequest('/api/user/mobile_login', {
					code: this.password,
					phone: this.phone
				}, (res) => {
					console.log(res)
					this.$LocalStorage.setLocalStorageSync('userInfo',res.data.data,() =>{
						console.log('hhhhh')
					});
					uni.switchTab({
						url:'/pages/Mine/index'
					})
				});


			},
			
			sendSmsCode() {
				uni.request({
					url: this.$Config.HOST + '/api/sms/smsCode',
					method: 'POST',
					data: {
						type: 1, // 替换为实际的验证码类型
						phone: this.phone
					},
					success: (res) => {
						if (res.data.code === 200) {
							uni.showToast({
								title: res.data.msg,
								icon: 'success'
							});
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						uni.showToast({
							title: '发送验证码失败',
							icon: 'none'
						});
					}
				});
			}

		},
	}
</script>

<style>
	page {
		background-color: #e1e4e1;
	}

	.box {
		width: 100%;
		margin: 0 auto;
	}

	.top-imgage {

		width: 100%;
		height: 500rpx;
	}

	.img-dl {
		width: 100%;
		height: 100%;
	}

	.top-title {
		text-align: center;
		width: 80%;
		font-weight: bold;
		font-size: 40rpx;
		height: 90rpx;
	}

	.container {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		margin-top: 40rpx;

		padding: 20rpx;
	}

	.input-box {
		width: 100%;
		display: flex;
		align-items: center;
		text-align: center;

		margin-bottom: 20rpx;
	}

	.input-box-phone {
		width: 200rpx;
		height: 55rpx;
		position: absolute;
	}

	input {
		width: 100%;
		height: 100rpx;
		text-align: 200rpx;
		border-bottom: 4rpx solid #2e2e2e;
		padding: 20rpx;
	}

	.yzm {
		padding: 0rpx;
		width: 94%;
		position: absolute;
	}

	button {
		width: 70%;
		text-align: center;
		color: #2ae736;
		background-color: #e1e4e1;
		border: 2rpx solid #2ae736;
		font-size: 28rpx;

	}

	.button-btn-box {
		width: 330rpx;
		margin-left: 400rpx;
	}

	.btn {
		width: 80%;
		height: 100rpx;
		margin-top: 50rpx;
		line-height: 100rpx;
		text-align: center;
		background-color: #2ae736;
		color: #fff;
		border-radius: 10rpx;
	}
</style>